<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        body {
            padding: 20px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .ruler-wrap {
            width: 100%;
            /*height: 60px;*/
            line-height: 1px;
            overflow: hidden;
            margin: 0 auto 50px;
            position: relative;
        }

        .text-input {
            display: block;
            width: 100px;
            height: 30px;
            border-radius: 5px;
            background: #f6f6f6;
            border: none;
            text-align: center;
            font-size: 14px;
            color: #4142cc;
            font-weight: bold;
            letter-spacing: 1px;
            margin: 0 auto;
        }

        .text-input:focus {
            outline: none;
        }
    </style>
</head>

<body>

    <!-- 刻度尺容器(必要的) -->
    <input id="rulerText" class="text-input" type="text" readonly value="">
    <div class="ruler-wrap" id="ruler">

        <canvas id="canvas"></canvas>
    </div>
    <div>
        <button id="delete">删除</button>
    </div>
    <div>
        <button id="disabled">切换禁用</button>
        <span id="diabledSpan">已禁用</span>
    </div>
    <div style="margin-top: 10px;">
        <button id="update">更新第一个滑块+10s</button>
    </div>
    <!-- 引入刻度尺插件js -->
    <script src="./draw.js"></script>
    <script>
        const rulerText = document.getElementById("rulerText");
        rulerText.value = "12:00";

        const rulerDom = document.getElementById("ruler");

        const scaleLine = document.createElement('span');

        scaleLine.id = 'positionSpan';
        // 设置样式
        scaleLine.style.position = 'absolute';
        scaleLine.style.width = '1px'; // 刻度线的宽度
        scaleLine.style.height = '50px'; // 刻度线的高度
        scaleLine.style.backgroundColor = 'red'; // 刻度线的颜色

        window.onload = function () {
            let regions = [];

            //调用刻度尺方法
            const ruler = new Ruler({
                el: document.getElementById('canvas'), //容器id
                height: 50,
                // time: 24 * 60 * 60,// 秒数
                disabled: true,
                // time: 2 * 60 * 60,// 秒数
                time: 2.13 * 60,// 秒数
                addRegion: (region) => {
                    regions.push(region)
                    console.log('更新了', region);
                },
                addTempPosition: offsetX => {
                    if (offsetX) {

                        scaleLine.style.left = `${offsetX}px`; // 这里可以替换为实际的位置
                        rulerDom.appendChild(scaleLine);
                    } else {
                        // 删除
                        const scaleLine = document.getElementById('positionSpan');
                        if (scaleLine) {
                            rulerDom.removeChild(scaleLine);
                        }
                    }

                }
            });

            ruler.init();

            // setTimeout(()=>{
            //     // ruler.setTime(50)
            //     ruler.setTime(2.13 * 60)
            // },500)

            const deleteBtn = document.getElementById('delete');
            deleteBtn.addEventListener('click', () => {
                if (regions.length) {
                    ruler.deleteMark(regions[0].id);
                    regions = regions.filter(e => e.id === id)
                }
            })

            const disableBtn = document.getElementById('disabled');
            const diabledSpan = document.getElementById('diabledSpan');
            disableBtn.addEventListener('click', () => {
                ruler.setDisabled(false);
                const bool = ruler.getter('disabled');
                diabledSpan.innerText = bool ? '已禁用' : '未禁用'
            })

            const updateBtn = document.getElementById('update');
            updateBtn.addEventListener('click', () => {
                if (regions.length) {
                    const firstRegion = regions[0];
                    firstRegion.end = firstRegion.end + 10;// +10s
                    ruler.updateRegion(firstRegion);
                } else {
                    alert('没有区域')
                }
            })
        };

    </script>

</body>

</html>